<template>
  <div>
    <div @click="changefather('defaultcom')" class="back-arrow">&lt;&lt;基本信息</div>
    <div class="card-box">
      <ul>
        <li
          v-for="(item,index) in collectNoteListCopy "
          :key="index"
          :style="{ 'backgroundImage': 'url(/api/upload/'+item.noteImg1+')'}"
        >
          <div class="card-mask">
            <div class="btn-collect" @click="openMsgBox(item.note_noteId)">
              <i class="el-icon-star-on" style="font-size:20px"></i>
              已收藏
            </div>
            <div class="btn-detail" @click="goNote(item.note_noteId)">
              <span>
                <i class="el-icon-thumb" style="font-size:18px"></i>
                查看详情
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 分页 -->
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="8"
        :total="totalNum"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import "@/assets/style/global.css";
import "@/styles/myElPagination.scss";
export default {
  mounted() {
    this.loadData();
  },
  data() {
    return {
      collectNoteList: [],
      totalNum: 0,
      collectNoteListCopy: []
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/api/users/getCollectNotes")
        .then(res => {
          this.collectNoteList = res.data.results;
          this.collectNoteListCopy =
            this.collectNoteList.length > 8
              ? this.collectNoteList.slice(0, 8)
              : this.collectNoteList;
          this.totalNum = res.data.results.length;
        })
        .catch(err => {
          console.log("笔记收藏获取失败", err);
        });
    },
    changefather(p) {
      this.$parent.changesoncom(p);
    },
    openMsgBox(nid) {
      this.$confirm("您确定要取消收藏吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        this.removeCollect(nid);
      });
    },
    removeCollect(id) {
      //取消收藏
      this.$axios
        .post("/api/users/removeNoteCollect", { noteId: id })
        .then(res => {
          this.loadData();
        })
        .catch(err => {
          console.log("取消笔记收藏接口获取失败", err);
        });
    },
    goNote(id) {
      this.$router.push({ path: `/community/notelist/note/${id}` });
    },
    handleCurrentChange(currentPage) {
      this.collectNoteListCopy = this.collectNoteList.slice(
        (currentPage - 1) * 8,
        this.totalNum - 8 * (currentPage - 1) >= 8
          ? currentPage * 8
          : this.totalNum
      );
    }
  }
};
</script>

<style scoped lang='scss'>
.back-arrow {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #e6a23c;
  margin-bottom: 10px;
}
.back-arrow:hover {
  opacity: 0.5;
}
.card-box {
  width: 100%;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 200px;
      height: 240px;
      background-image: url("../../../../assets/note.jpg");
      background-size: cover;
      border-radius: 10px;
      margin-right: 20px;
      margin-bottom: 20px;
      position: relative;
      transition: all 0.6s;
      box-shadow: 0 0 10px #000;
      overflow: hidden;
      .card-mask {
        width: 100%;
        height: 100%;
        position: relative;
        transition: all 0.5s;
        font-size: 14px;
        .btn-collect {
          width: 80px;
          height: 30px;
          background-color: #fff;
          color: #e6a23c;
          border-radius: 6px;
          position: absolute;
          top: -60px;
          right: 10px;
          transition: all 0.5s;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .btn-detail {
          width: 140px;
          height: 40px;
          background-color: #e6a23c;
          border-radius: 4px;
          color: white;
          position: absolute;
          bottom: -60px;
          left: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.5s;
        }
      }
    }
    li:hover {
      .card-mask {
        background-color: rgba(0, 0, 0, 0.3);
        .btn-collect {
          top: 10px;
        }
        .btn-detail {
          bottom: 10px;
        }
        .btn-collect:hover {
          background-color: #fff3cb;
          color: #f79b24;
          cursor: pointer;
        }
        .btn-detail:hover {
          span {
            border-bottom: 1px solid #fff;
            cursor: pointer;
          }
        }
      }
    }
    li:nth-child(4n) {
      margin-right: 0;
    }
  }
}
</style>
